/**
 * 画布操作相关的可组合函数
 * 
 * 该模块封装了与画布操作相关的功能，包括：
 * 1. 画布对象的添加与删除
 * 2. 背景图片处理
 * 3. 画布导出相关功能
 */

import { ref } from 'vue';
import { ElMessage, ElLoading } from 'element-plus';
import { canvasErrorHandler } from '../utils/errorHandling';
import { isCanvasReady } from '../utils/canvasUtils';

/**
 * 创建画布操作功能
 * @param {Object} options 配置选项
 * @param {Function} options.mmToPx 毫米转像素的函数
 * @param {Function} options.pxToMm 像素转毫米的函数
 * @returns {Object} 画布操作相关的方法和属性
 */
export default function useCanvasOperations(options = {}) {
  // 背景图片相关状态
  const hasBackgroundImage = ref(false);
  const networkImageUrl = ref('');
  
  // 追踪画布是否已保存状态
  const saved = ref(true);
  
  // 缩放动画效果控制
  const scaleChanged = ref(false);

 

  /**
   * 使用网络图片作为背景
   * @param {string} url 图片URL
   */
  const handleNetworkImageAsBackground = (url) => {
    if (!isCanvasReady()) return;
    
    if (!url) {
      ElMessage.warning('请输入有效的图片URL');
      return;
    }
    
    networkImageUrl.value = url;
    
    // 创建加载状态
    let loadingInstance = ElLoading.service({
      text: '正在加载背景图片...',
      background: 'rgba(0, 0, 0, 0.7)'
    });
    
    // 跨域失败计数
    let corsFailCount = 0;
    const MAX_CORS_ATTEMPTS = 1; // 最多尝试一次，如果失败直接提示用户
    
    // 创建超时定时器
    let timeoutTimer = setTimeout(() => {
      console.warn('网络图片加载超时');
      handleLoadingFailure('图片加载超时');
    }, 4000); // 8秒超时
    
    // 统一处理失败情况
    const handleLoadingFailure = (message) => {
      // 清除超时计时
      if (timeoutTimer) {
        clearTimeout(timeoutTimer);
        timeoutTimer = null;
      }
      
      // 确保关闭loading
      if (loadingInstance) {
        loadingInstance.close();
        loadingInstance = null;
      }
      
      // 重置URL
      networkImageUrl.value = '';
      
      // 显示错误信息，指导用户解决问题
      ElMessage.error({
        message: `图片加载失败：${message}。该图片(${url})存在下载限制，需要用户动下载后使用本地方式导入。`,
        duration: 10000,
        showClose: true
      });
      
      console.error('背景图片加载失败:', url, message);
    };
    
    // 尝试使用Image直接加载
    const img = new Image();
    img.crossOrigin = 'anonymous';
    
    img.onload = () => {
      try {
        if (!window.globalCanvas) {
          handleLoadingFailure('画布未初始化');
          return;
        }
        
        // 使用Fabric创建图片对象
        const fabricImage = new window.fabric.Image(img);
        
        // 计算缩放比例
        const canvasWidth = window.globalCanvas.width;
        const canvasHeight = window.globalCanvas.height;
        
        const scaleX = canvasWidth / img.width;
        const scaleY = canvasHeight / img.height;
        const scale = Math.min(scaleX, scaleY);
        
        // 设置图片属性
        fabricImage.scaleX = scale;
        fabricImage.scaleY = scale;
        fabricImage.opacity = 0.4; // 设置为40%不透明度
        
        // 居中显示
        const scaledWidth = img.width * scale;
        const scaledHeight = img.height * scale;
        fabricImage.left = (canvasWidth - scaledWidth) / 2;
        fabricImage.top = (canvasHeight - scaledHeight) / 2;
        
        // 设置背景图片
        window.globalCanvas.backgroundImage = fabricImage;
        
        if (typeof window.globalCanvas.setBackgroundImage === 'function') {
          window.globalCanvas.setBackgroundImage(fabricImage);
        }
        
        // 强制重新渲染
        window.globalCanvas.requestRenderAll();
        
        // 清除超时计时
        if (timeoutTimer) {
          clearTimeout(timeoutTimer);
          timeoutTimer = null;
        }
        
        // 关闭loading
        if (loadingInstance) {
          loadingInstance.close();
          loadingInstance = null;
        }
        
        // 更新状态
        hasBackgroundImage.value = true;
        ElMessage.success('背景图片设置成功');
        
        // 标记为未保存状态
        saved.value = false;
        
      } catch (error) {
        console.error('设置背景图片时出错:', error);
        handleLoadingFailure(error.message || '处理图片时发生错误');
      }
    };
    
    img.onerror = () => {
      console.warn('加载网络图片失败，尝试使用fabric直接加载');
      
      // 清除当前的超时定时器
      if (timeoutTimer) {
        clearTimeout(timeoutTimer);
      }
      
      // 设置新的超时定时器
      timeoutTimer = setTimeout(() => {
        handleLoadingFailure('Fabric加载图片超时');
      }, 4000);
      
      // 尝试使用fabric直接加载
      window.fabric.Image.fromURL(url, (fabricImage) => {
        // 处理成功加载的情况
        if (fabricImage && window.globalCanvas) {
          try {
            // 计算缩放比例
            const canvasWidth = window.globalCanvas.width;
            const canvasHeight = window.globalCanvas.height;
            
            const scaleX = canvasWidth / fabricImage.width;
            const scaleY = canvasHeight / fabricImage.height;
            const scale = Math.min(scaleX, scaleY);
            
            // 设置图片属性
            fabricImage.scaleX = scale;
            fabricImage.scaleY = scale;
            fabricImage.opacity = 0.4;
            
            // 居中显示
            const scaledWidth = fabricImage.width * scale;
            const scaledHeight = fabricImage.height * scale;
            fabricImage.left = (canvasWidth - scaledWidth) / 2;
            fabricImage.top = (canvasHeight - scaledHeight) / 2;
            
            // 设置背景图片
            window.globalCanvas.backgroundImage = fabricImage;
            
            if (typeof window.globalCanvas.setBackgroundImage === 'function') {
              window.globalCanvas.setBackgroundImage(fabricImage);
            }
            
            // 重新渲染
            window.globalCanvas.requestRenderAll();
            
            // 清除超时计时
            if (timeoutTimer) {
              clearTimeout(timeoutTimer);
              timeoutTimer = null;
            }
            
            // 关闭loading
            if (loadingInstance) {
              loadingInstance.close();
              loadingInstance = null;
            }
            
            // 更新状态
            hasBackgroundImage.value = true;
            ElMessage.success('背景图片设置成功');
            
            // 标记为未保存状态
            saved.value = false;
          } catch (error) {
            handleLoadingFailure(error.message || '处理图片时发生错误');
          }
        } else {
          handleLoadingFailure('加载图片失败');
        }
      }, {
        crossOrigin: 'anonymous',
        onerror: () => {
          handleLoadingFailure('跨域限制，无法加载图片');
        }
      });
    };
    
    // 开始加载图片
    img.src = url;
  };

  /**
   * 处理本地背景图片上传
   * @param {File} file 上传的文件对象
   */
  const handleBackgroundImageUpload = (file) => {
    if (!isCanvasReady()) return;
    
    if (!file) {
      ElMessage.warning('未选择文件');
      return;
    }
    
    // 检查文件类型
    if (!file.type.startsWith('image/')) {
      ElMessage.error('请上传图片文件');
      return;
    }
    
    const reader = new FileReader();
    
    reader.onload = (event) => {
      const loadingInstance = ElLoading.service({
        text: '正在处理背景图片...',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      
      const imgUrl = event.target.result;
      
      // 本地上传的图片已经是DataURL，可以直接创建图片对象
      const img = new Image();
      img.onload = () => {
        try {
          // 检查Canvas实例对象及其方法
          if (!window.globalCanvas) {
            loadingInstance.close();
            ElMessage.error('画布未初始化');
            return;
          }
          
          // 使用Fabric创建图片对象
          const fabricImage = new window.fabric.Image(img);
          
          // 计算缩放比例
          const canvasWidth = window.globalCanvas.width;
          const canvasHeight = window.globalCanvas.height;
          
          const scaleX = canvasWidth / img.width;
          const scaleY = canvasHeight / img.height;
          const scale = Math.min(scaleX, scaleY);
          
          // 设置图片属性
          fabricImage.scaleX = scale;
          fabricImage.scaleY = scale;
          
          // 设置透明度，让背景图变浅，更适合作为辅助参照
          fabricImage.opacity = 0.4; // 设置为40%不透明度
          
          // 居中显示
          const scaledWidth = img.width * scale;
          const scaledHeight = img.height * scale;
          fabricImage.left = (canvasWidth - scaledWidth) / 2;
          fabricImage.top = (canvasHeight - scaledHeight) / 2;
          
          // 设置背景图片
          window.globalCanvas.backgroundImage = fabricImage;
          
          // 如果有setBackgroundImage方法则使用
          if (typeof window.globalCanvas.setBackgroundImage === 'function') {
            window.globalCanvas.setBackgroundImage(fabricImage);
          }
          
          // 强制重新渲染
          window.globalCanvas.requestRenderAll();
          
          // 更新状态
          hasBackgroundImage.value = true;
          ElMessage.success('背景图片设置成功');
          
          // 标记为未保存状态
          saved.value = false;
        } catch (error) {
          console.error('设置背景图片时出错:', error);
          ElMessage.error('设置背景图片时出错: ' + error.message);
        } finally {
          loadingInstance.close();
        }
      };
      
      img.onerror = () => {
        loadingInstance.close();
        ElMessage.error('图片加载失败，请检查图片格式');
      };
      
      // 设置DataURL作为图片源
      img.src = imgUrl;
    };
    
    reader.onerror = (error) => {
      canvasErrorHandler(error, '读取图片文件失败');
    };
    
    // 以DataURL格式读取文件内容
    reader.readAsDataURL(file);
  };

  /**
   * 移除画布背景
   */
  const removeCanvasBackground = () => {
    if (!isCanvasReady()) return;
    
    try {
      // Fabric.js 6.6.1中移除背景的兼容方式
      // 方法1: 直接设置backgroundImage为null
      window.globalCanvas.backgroundImage = null;
      
      // 方法2: 如果setBackgroundImage方法存在则使用
      if (typeof window.globalCanvas.setBackgroundImage === 'function') {
        window.globalCanvas.setBackgroundImage(null);
      }
      
      // 强制重新渲染
      window.globalCanvas.requestRenderAll();
      
      // 更新状态
      hasBackgroundImage.value = false;
      networkImageUrl.value = '';
      ElMessage.success('背景图片已移除');
      
      // 标记为未保存状态
      saved.value = false;
    } catch (error) {
      console.error('移除背景图片时出错:', error);
      ElMessage.error('移除背景图片时出错: ' + error.message);
    }
  };

  /**
   * 清空画布
   */
  const clearCanvas = () => {
    if (!isCanvasReady()) return;
    
    // 保存背景图片（如果有）
    const backgroundImage = window.globalCanvas.backgroundImage;
    
    window.globalCanvas.clear();
    
    // 还原背景图片
    if (backgroundImage) {
      window.globalCanvas.setBackgroundImage(backgroundImage, () => {
        window.globalCanvas.renderAll();
      });
    }
    
    // 标记为未保存状态
    saved.value = false;
    
    console.log('画布已清空');
  };

  /**
   * 将当前画布导出为图片
   * @returns {Promise<string>} 图片的Data URL
   */
  const exportCanvasToImage = () => {
    return new Promise((resolve, reject) => {
      if (!isCanvasReady()) {
        reject(new Error('画布未初始化'));
        return;
      }
      
      try {
        const dataUrl = window.globalCanvas.toDataURL({
          format: 'png',
          quality: 1
        });
        
        resolve(dataUrl);
      } catch (error) {
        reject(error);
      }
    });
  };

  /**
   * 更新背景图片的透明度
   * @param {number} opacity 透明度值 (0-1)
   */
  const updateBackgroundOpacity = (opacity) => {
    if (!isCanvasReady() || !window.globalCanvas.backgroundImage) {
      console.log('无法更新背景图透明度: 画布未初始化或没有背景图片');
      return;
    }
    
    try {
      // 设置背景图片的透明度
      window.globalCanvas.backgroundImage.opacity = opacity;
      
      // 强制重新渲染
      window.globalCanvas.requestRenderAll();
      
      console.log(`背景图片透明度已更新为: ${opacity}`);
    } catch (error) {
      console.error('更新背景图片透明度时出错:', error);
      ElMessage.error('更新背景图片透明度时出错');
    }
  };

  /**
   * 设置背景图片编辑模式
   * @param {boolean} isEditable 是否可编辑
   */
  const setBackgroundEditable = (isEditable) => {
    if (!isCanvasReady()) {
      console.log('无法设置背景图编辑模式: 画布未初始化');
      return;
    }
    
    try {
      if (isEditable) {
        // 进入编辑模式
        if (!window.globalCanvas.backgroundImage) {
          console.log('无法设置背景图编辑模式: 没有背景图片');
          return;
        }
        
        // 记录当前背景图的属性
        const bgImage = window.globalCanvas.backgroundImage;
        const { scaleX, scaleY, opacity } = bgImage;
        
        // 获取元素以便创建新的图像
        const imgElement = bgImage.getElement();
        
        // 保存原始坐标
        // 关键修复：根据背景图片的originX/originY计算正确的位置
        let left = bgImage.left;
        let top = bgImage.top;
        
        // 如果背景图片使用了中心点定位，需要调整为左上角定位以保持位置
        if (bgImage.originX === 'center' && bgImage.originY === 'center') {
          // 计算图片宽高
          const imgWidth = imgElement.width * scaleX;
          const imgHeight = imgElement.height * scaleY;
          
          // 修正坐标，保持视觉位置不变
          left = left - imgWidth / 2;
          top = top - imgHeight / 2;
          
          console.log('转换背景图坐标，从中心点定位转为左上角定位:', 
                      '原坐标:', bgImage.left, bgImage.top,
                      '新坐标:', left, top);
        }
        
        // 移除背景图
        window.globalCanvas.backgroundImage = null;
        
        // 创建一个普通的图片对象
        const editableImage = new window.fabric.Image(imgElement, {
          left: left,
          top: top,
          scaleX: scaleX,
          scaleY: scaleY,
          opacity: opacity,
          selectable: true,
          evented: true,
          centeredScaling: false,
          lockRotation: true, // 禁止旋转
          originX: 'left',  // 使用左上角作为定位点
          originY: 'top',
          customType: 'backgroundEdit' // 标记为背景编辑模式的图片
        });
        
        // 添加到画布
        window.globalCanvas.add(editableImage);
        window.globalCanvas.setActiveObject(editableImage);
        window.globalCanvas.requestRenderAll();
        
        console.log('背景图片已进入编辑模式');
      } else {
        // 退出编辑模式
        // 查找标记为backgroundEdit的图片对象
        const objects = window.globalCanvas.getObjects();
        const editableBackground = objects.find(obj => obj.customType === 'backgroundEdit');
        
        if (!editableBackground) {
          console.log('未找到可编辑背景图，无法退出编辑模式');
          return;
        }
        
        console.log('找到编辑状态的背景图，准备转换回背景');
        
        // 获取当前编辑后的属性
        const { left, top, scaleX, scaleY, opacity } = editableBackground;
        
        // 获取图片元素
        const imgElement = editableBackground.getElement();
        if (!imgElement) {
          console.error('获取图片元素失败');
          return;
        }
        
        // 计算图片宽高
        const imgWidth = imgElement.width * scaleX;
        const imgHeight = imgElement.height * scaleY;
        
        // 移除可编辑的图片对象
        window.globalCanvas.remove(editableBackground);
        
        // 创建新的背景图对象
        const newBackgroundImage = new window.fabric.Image(imgElement);
        
        // 将左上角坐标转换为中心点坐标
        const centerLeft = left + imgWidth / 2;
        const centerTop = top + imgHeight / 2;
        
        console.log('设置背景图属性, 从左上角坐标转为中心点坐标:', 
                    '原坐标:', left, top,
                    '中心点坐标:', centerLeft, centerTop);
        
        // 设置背景图片属性
        newBackgroundImage.set({
          originX: 'center',
          originY: 'center',
          left: centerLeft,
          top: centerTop,
          scaleX: scaleX,
          scaleY: scaleY,
          opacity: opacity
        });
        
        // 设置为背景
        window.globalCanvas.backgroundImage = newBackgroundImage;
        
        // 强制重新渲染
        window.globalCanvas.requestRenderAll();
        
        console.log('背景图片已退出编辑模式');
      }
    } catch (error) {
      console.error('设置背景图片编辑模式时出错:', error);
      ElMessage.error('设置背景图片编辑模式时出错: ' + error.message);
    }
  };

  return {
    hasBackgroundImage,
    networkImageUrl,
    saved,
    scaleChanged,
    handleNetworkImageAsBackground,
    handleBackgroundImageUpload,
    removeCanvasBackground,
    clearCanvas,
    exportCanvasToImage,
    updateBackgroundOpacity,
    setBackgroundEditable
  };
}
